<template>
	<view class='px-1-3 py-0-4 rounded-xxl inline-block' :class="['tag-' + type]">
		<text class='text-xs'>{{text}}</text>
	</view>
</template>

<script>
import { watch } from "vue";
export default {
	props: {
		type: {
			default: "red",
			type: String
		},
		text: String,
	}
}
</script>

<style>
.tag-red{
	background-color: rgba(245,102,98,0.1);
	color: rgb(245,102,98);
}
.tag-orange{
	background-color: rgba(253,131,88,0.1);
	color: rgb(253,131,88);
}
.tag-yellow{
	background-color: rgba(245,181,50,0.1);
	color: rgb(245,181,50);
}
.tag-green{
	background-color: rgba(61,220,132,0.1);
	color: rgb(61,220,132);
}
.tag-gray{
	background-color: rgba(123,135,154,0.1);
	color: rgb(123,135,154);
}
.tag-primary{
	background-color: rgba(47,96,213,0.1);
	color: rgb(47,96,213);
}
</style>